/* static/css/beautify_json.css */

/* flask 返回 html 情况下, 需要用这些高亮设置 */
.json-key { color: #A52A2A; }
.json-string { color: #008000; }
.json-value { color: #0000FF; }
.json-boolean { color: #000080; }
.json-null { color: #808080; }
.json-error { color: #FF0000; }


/* { Json数据 | 复制Json | 返回 }, 这三个元素显示在同一行 */
.header-container {  /* 规定两端对齐, 让Json数据在左边, 复制Json和返回按钮在右边 */
    display: flex;  /* 弹性布局, 子元素可以灵活调整 */
    justify-content: space-between;  /* 设置子元素在主轴（默认为水平方向）上的对齐方式, 两端不留空隙, 也就是两端对齐 */
    align-items: center;  /* 设置子元素在交叉轴（默认为垂直方向）上的对齐方式 */
    margin-bottom: 2px; /* 缩小上下间距 */
}
/* 复制Json和返回按钮, 在右边, 中间间距 10px */
.button-container {  /* { 复制Json | 返回 }, 两个按钮的样式设置 */
    display: flex;  /* 弹性布局 */
    gap: 10px;  /* 子元素之间的间距为 10px */
}


/* 给 html 和 body 标签添加高度属性, 子容器才能继承该高度, 以确保 .container 能够继承到一个明确的高度 */
body, html { height: 100%; margin: 10px; }


/* Json显示区 */
.json_container {
    margin-top: 2px; /* 缩小上下间距 */
	display: flex; /* 弹性布局 */
	justify-content: center; /* 水平居中 */
	align-items: center; /* 交叉轴对齐 */
}


.json_code_style {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: Consolas, Monaco, "Courier New", Courier, monospace;
	font-size: 14px;
	line-height: 1.2;
	background-color: #f5f5f5;
	color: #333;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	overflow: auto;
}


/* 该页面弹框样式, 为了避免遮挡顶部右侧的 { 复制Json | 返回 } 按钮, 需要设置为居中 */
.custom-alert-beautify {
    position: fixed;
    top: 20px;

    /* left: 50%; /* 水平位置居中 */
    /* transform: translateX(-50%); /* 将元素的水平位置偏移一半宽度，达到居中的效果 */

    right: 50%; /* 水平位置居中 */
    transform: translateX(50%); /* 将元素的水平位置偏移一半宽度，达到居中的效果 */

    background-color: #000bba;
    color: red;
    font-weighe: bold;
    padding: 10px;
    border-radius: 5px;
    display: none;
    z-index: 1000;
}